<template>
    <div class="header block">
        <div class="row">
            <div>
                <span>公司名称：</span>
                <span>{{ detailInfo.serveCompanyName }}</span>
                <span style="margin-left: 40px">开始时间：</span>
                <span>{{ billTime[0] }}</span>
                <span style="margin-left: 40px">结束时间：</span>
                <span>{{ billTime[1] }}</span>
            </div>
            <div>
<!--                <button class="btn" @click="onExport">-->
<!--                    <i class="el-icon el-icon-upload2" />-->
<!--                    导出-->
<!--                </button>-->
              <export-button @export="onExport"></export-button>
            </div>
        </div>
        <div class="row basic">
            <div>
                <span class="key">转账人数：</span>
                <span class="value">{{ detailInfo.totalPeopleNum }}人</span>
                <span class="key">已领人数：</span>
                <span class="value"
                    >{{ detailInfo.payReceivePeopleNum }}人</span
                >
                <span class="key">转账金额：</span>
                <span class="value important"
                    >{{ detailInfo.payTotalMoney }}元</span
                >
                <span class="key">已领金额：</span>
                <span class="value important"
                    >{{ detailInfo.payReceiveTotalMoney }}元</span
                >
                <span class="key">未领金额：</span>
                <span class="value important"
                    >{{ detailInfo.payUnclaimedTotalMoney }}元</span
                >
            </div>
        </div>
    </div>
    <div class="container block">
        <el-tabs model-value="detail" >
            <el-tab-pane label="按详单" name="detail">
                <div class="header">

                    <div class="search">
                            <el-select
                                v-model="searchType"
                                filterable
                                placeholder="搜名称"
                                class="screen-i search-type"
                            >
                                <el-option label="搜名称" :value="0" />
                                <el-option label="搜备注" :value="1" />
                            </el-select>
                            <input
                                type="text"
                                :placeholder="
                                    searchType
                                        ? '请输入发薪备注'
                                        : '请输入员工信息'
                                "
                                class="input search-input"
                                v-model="searchText"
                                @keydown.enter="search"
                            />
                        <button class="btn" @click="search">搜索</button>
                        <button class="btn-white" @click="onReset">重置</button>
                        <el-select v-model="queryStatus" placeholder="领薪状态" multiple @change="onQueryStatus" style="margin-left:10px">
                            <el-option
                                v-for="item in statusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <div class=""></div>
                </div>
                <div class="table">
                    <el-table
                        :data="tableData"
                        style="width: 100%"
                        :header-row-style="{ color: '#202536' }"
                        :row-style="{ color: '#5E617D' }"
                    >
                        <el-table-column prop="userName" label="员工姓名" width="120" >
                            <template #default="scope">
                                <div >
                                    <div>
                                        {{ scope.row.userName }}
                                    </div>
                                    <div v-if="scope.row.nickName">
                                        <el-tooltip
                                            class="box-item"
                                            effect="dark"
                                            content="此处为备注名"
                                            placement="top-start"
                                        >
                                            <div class="nickName">
                                                {{ scope.row.nickName ? '('+ scope.row.nickName +')' : '' }}
                                            </div>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="projectName" label="项目名" />
                        <el-table-column
                            label="发薪金额"
                            :formatter="(row:{paymentAmount:string}) => row.paymentAmount + '元'"
                        />
                        <el-table-column
                            prop="payTime"
                            width="240"
                            label="发薪时间"
                        />
                        <el-table-column
                            width="240"
                            prop="getSalaryTime"
                            label="领薪时间"
                        />
                        <el-table-column
                            prop="billStatusMsg"
                            label="回单状态"
                        />
                        <el-table-column prop="statusMsg" label="领薪状态" />
                        <el-table-column prop="detailRemarks" label="备注" />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <p
                                    v-if="
                                        scope.row.status === 4 ||
                                            scope.row.status === 0
                                    "
                                    class="link"
                                    @click="stopPay(scope.row.id)"
                                >
                                    停止发薪
                                </p>
                                <p
                                    v-else-if="
                                        scope.row.status === 1 &&
                                            scope.row.billStatus === 0
                                    "
                                    class="link"
                                    @click="
                                        applyBill(
                                            scope.row.batchNo,
                                            scope.row.detailOrderNo,
                                            scope.row.id
                                        )
                                    "
                                >
                                    申请回单
                                </p>
                                <p
                                    v-else-if="
                                        scope.row.status === 1 &&
                                            scope.row.billStatus === 1
                                    "
                                    class="link"
                                    @click="
                                        $message.success(
                                            '回单正在生成中，请耐心等待！'
                                        )
                                    "
                                >
                                    回单生成中
                                </p>
                                <p
                                    v-else-if="
                                        scope.row.status === 1 &&
                                            scope.row.billStatus === 2
                                    "
                                    @click="
                                        onDownloadBill(
                                            scope.row.batchNo,
                                            scope.row.detailOrderNo,
                                            scope.row.id
                                        )
                                    "
                                    class="link"
                                >
                                    下载回单
                                </p>
                                <p v-else>
                                    不可操作
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        class="pagination"
                        v-model:currentPage="pageNum"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 30, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="按总和" name="all">
                <div class="header">
                    <div class="search">
                        <input
                            type="text"
                            placeholder="请输入员工信息"
                            class="input search-input"
                            v-model="searchText2"
                            @keydown.enter="search2"
                        />
                        <button class="btn" @click="search2">搜索</button>
                        <button class="btn-white" @click="onReset2">
                            重置
                        </button>
                    </div>
                    <div class=""></div>
                </div>
                <div class="table">
                    <el-table
                        :data="tableData2"
                        style="width: 100%"
                        :header-row-style="{ color: '#202536' }"
                        :row-style="{ color: '#5E617D' }"
                    >
                        <el-table-column prop="userName" label="员工姓名" width="120" >
                            <template #default="scope">
                                <div >
                                    <div>
                                        {{ scope.row.userName }}
                                    </div>
                                    <div v-if="scope.row.nickName">
                                        <el-tooltip
                                            class="box-item"
                                            effect="dark"
                                            content="此处为备注名"
                                            placement="top-start"
                                        >
                                            <div class="nickName">
                                                {{ scope.row.nickName ? '('+ scope.row.nickName +')' : '' }}
                                            </div>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="idCardNo" label="身份证号" />
                        <el-table-column
                            prop="payReceiveTotalCount"
                            label="领薪次数"
                        />
                        <el-table-column
                            prop="payTotalMoney"
                            label="本月发薪金额"
                        />
                        <el-table-column
                            prop="payReceiveTotalMoney"
                            label="本月领薪金额"
                        />
                        <el-table-column
                            prop="getSalaryTime"
                            label="最后领薪时间"
                        />
                    </el-table>
                    <el-pagination
                        class="pagination"
                        v-model:currentPage="pageNum2"
                        :page-sizes="[10, 30, 50, 100]"
                        v-model:page-size="pageSize2"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total2"
                        @size-change="handleSizeChange2"
                        @current-change="handleCurrentChange2"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import {
    getBillDetailInfo,
    getBillDetailList,
    BillDetailDto,
    getBillDetailStatistics,
    BillStatisticsDto,
    BillDto
} from '@/api/bill'
import { stopPay, applyBill, downloadBill } from '@/api/operation'
import { exportBillDetail } from '@/api/export'

export default defineComponent({
    name: 'BillDetail',
    data () {
        return {
            pageSize: 10,
            pageSize2: 10,
            pageNum: 1,
            pageNum2: 1,
            total: 0,
            total2: 0,
            searchType: 0,
            tableData: [] as BillDetailDto[],
            tableData2: [] as BillStatisticsDto[],
            searchText: '',
            searchText2: '',
            searchValue: '',
            searchValue2: '',
            detailInfo: {} as BillDto,
            queryStatus: '',
            statusList: [{
                value: '0',
                label: '未领取'
            }, {
                value: '1',
                label: '已领取'
            }, {
                value: '3',
                label: '进行中'
            }, {
                value: '4',
                label: '领取失败'
            }],
            billTime: [] as string[]
        }
    },
    created () {
        console.log(this.$route.params.month, 'params.month')
        // JSON.stringify(this.$route.params.month).split(',')
        this.billTime = JSON.parse(JSON.stringify(this.$route.params.month)).split(',')
        console.log(this.billTime, 'this.billTime')
        this.handleCurrentChange()
        this.handleCurrentChange2()
        this.initBasic()
    },
    methods: {
        initBasic () {
            getBillDetailInfo({
                serveCompanyId: this.$route.params.id as string,
                startTime: this.billTime[0],
                endTime: this.billTime[1]
            }).then(res => {
                if (res.list[0]) {
                    this.detailInfo = res.list[0]
                }
            })
        },
        handleCurrentChange () {
            getBillDetailList({
                detailRemarks: this.searchType ? this.searchValue : '',
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                searchText: this.searchType ? '' : this.searchValue,
                startTime: this.billTime[0],
                endTime: this.billTime[1],
                serveCompanyId: this.$route.params.id as string,
                queryStatus: this.queryStatus.toString() ? this.queryStatus.toString() : null
            }).then(res => {
                console.log(res, 'resres')
                this.tableData = res.list.map((item) => {
                    item.userName = item.userName + '(' + ((item.idCardNo + '').slice(14)) + ')'
                    return item
                })
                this.tableData = res.list
                this.total = res.total
            })
        },
        handleCurrentChange2 () {
            getBillDetailStatistics({
                pageNum: this.pageNum2,
                pageSize: this.pageSize2,
                searchText: this.searchValue2,
                startTime: this.billTime[0],
                endTime: this.billTime[1],
                serveCompanyId: this.$route.params.id as string

            }).then(res => {
                this.tableData2 = res.list.map((item) => {
                    item.userName = item.userName + '(' + ((item.idCardNo + '').slice(14)) + ')'
                    return item
                })
                console.log(this.tableData2, 'list')
                this.total2 = res.total
            })
        },
        handleSizeChange () {
            this.pageNum = 1
            this.handleCurrentChange()
        },
        handleSizeChange2 () {
            this.pageNum2 = 1
            this.handleCurrentChange2()
        },
        search () {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.handleCurrentChange()
        },
        search2 () {
            this.searchValue2 = this.searchText2
            this.pageNum2 = 1
            this.handleCurrentChange2()
        },
        onReset () {
            this.searchText = ''
            this.search()
        },
        onReset2 () {
            this.searchText2 = ''
            this.search2()
        },
        async stopPay (id: string) {
            await stopPay(id)
            this.$message.success('停止发薪成功！')
            this.handleCurrentChange()
            this.initBasic()
        },
        async onExport () {
            const result = await exportBillDetail({
                serveCompanyId: this.$route.params.id as string,
                startTime: this.billTime[0],
                endTime: this.billTime[1],
                queryStatus: this.queryStatus.toString() ? this.queryStatus.toString() : null
            })
            window.location.href = process.env.VUE_APP_BASE_URL + '/common/download?delete=true&fileName=' + result

            this.$message.success('导出成功！')
        },
        async applyBill (batchNo: string, detailOrderNo: string, id: number) {
            await applyBill({
                batchNo,
                detailOrderNo,
                id
            })
            this.$message.success('回单申请成功，请耐心等待！')
            this.handleCurrentChange()
        },
        async onDownloadBill (
            batchNo: string,
            detailOrderNo: string,
            id: number
        ) {
            const result = await downloadBill({
                batchNo,
                detailOrderNo,
                id
            })
            console.log(result, 'result')
            // console.log(JSON.parse(result), 'json格式')
            // const url =
            //     process.env.VUE_APP_BASE_URL +
            //     '/common/downloadBill?projectName=' +
            //     encodeURI(projectName) +
            //     '&detailOrderNo=' +
            //     detailOrderNo +
            //     '&batchNo=' +
            //     batchNo +
            //     '&download_url=' +
            //     JSON.parse(result).download_url
            // console.log(url, 'url')
            window.location.href = result
            this.$message.success('回单下载成功！')
        },

        onQueryStatus () {
            this.pageNum = 1
            this.handleCurrentChange()
            // eslint-disable-next-line no-unused-expressions
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.header.block{
    padding 20px
}
.basic
    margin-top 20px
.value
    margin-right 30px

.value.important
    color color-red
    font-style italic
:deep().el-tabs__header.is-top
    display inline-block
    margin-top -20px
:deep().el-tabs__nav-scroll
    padding-right 20px
.screen-i
    width 135px
    margin-right 16px
.search-type
    width 100px
    margin-right 8px
.nickName
    color #FFC53D
</style>
